<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理</title>
</head>

<body>

  <div id="app" style="text-align: center;">
    <div>{{title}}</div>
    <!-- 查询的表单部分 -->
    <div>
      部门:
      <span v-if="queryInfo.deptId ==-1">全部门</span>
      <span v-else>
        {{deptInfo.selectedAdd.deptName}}
      </span>

      <button @click="deptInfo.mode='query';queryDept();">选择部门</button>

      姓名:<input type="text" v-model="queryInfo.employeeName">
      电话:<input type="text" v-model="queryInfo.phone">

      排序：
      <select v-model="queryInfo.orderBy">
        <option v-for="d in orderByList" :value="d.value">
          {{d.text}}
        </option>
      </select>
      <button @click="query">查询</button>
      <button @click="resetQuery">重置</button>
      {{queryInfo}}
    </div>
    <hr>
    部门选择模式:{{deptInfo.mode}}

    <span v-if="addInfo.deptId ==-1">部门必须填写</span>
    <span v-else>
      {{deptInfo.selected.deptName}}
    </span>
    <!-- 添加的表单部分 -->
    <div>
      <button @click="deptInfo.mode='add';queryDept();">选择部门</button>
      姓名:<input type="text" v-model="addInfo.employeeName">
      电话:<input type="text" v-model="addInfo.phone">
      <button @click="add">添加</button>
      {{addInfo}}
    </div>
    <hr>

    <!-- 数据呈现 -->
    <table>
      <thead>
        <tr>
          <th>所属部门</th>
          <th>姓名</th>
          <th>电话</th>
          <th>修改时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="d in list">
          <td>{{d.dept.deptName}}</td>
          <td>{{d.employeeName}}</td>
          <td>{{d.phone}}</td>
          <td>{{d.lastupdate | formatDate}}</td>
          <td>
            <button @click="showModi(d)">修改</button>
            <button @click="del(d)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>


    <!-- 修改的部分 -->
    <div v-if="modiVsible">
      <h1>员工信息修改</h1>
      {{modiInfo.dept.deptName}}
      <button @click="deptInfo.mode='modi';queryDept();">修改部门</button>
      姓名:<input type="text" v-model="modiInfo.employeeName">
      电话:<input type="text" v-model="modiInfo.phone">
      <button @click="modify">保存</button>
      <button @click="modiVisible=false;deptInfo.visible=false">关闭</button>
      <hr>
      {{modiInfo}}
    </div>


    <!-- 部门选择的部分 -->
    <div v-show="deptInfo.visible">
      <!-- 数据显示部分 -->
      <table>
        <thead>
          <tr>
            <th>部门编号</th>
            <th>名称</th>
            <th>描述</th>
            <th>最后修改时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="d in deptInfo.list">
            <td>{{d.deptId}}</td>
            <td>{{d.deptName}}</td>
            <td>{{d.deptInfo}}</td>
            <td>
              {{d.lastupdate | formatDate}}
            </td>
            <td>
              <button @click="selectedDept(d)">选择</button>
            </td>
          </tr>
        </tbody>
      </table>



      <!-- 分页部分 -->
      <div>
        <a href="javascript:void(0)" @click="toDeptpage(deptInfo.page.pageNumber-1)">
          上一页
        </a>
        |
        当前页/总页数/总页数
        ({{deptInfo.page.pageNumber}}/
        {{deptInfo.page.pageCount}}/
        {{deptInfo.page.total}}
        )
        |
        <a href="javascript:void(0)" @click="toDeptpage(deptInfo.page.pageNumber+1)">
          下一页
        </a>

      </div>



    </div>






    <script src="../lib/axios.min.js"></script>
    <script src="../lib/qs.min.js"></script>
    <script src="../lib/spark-md5.js"></script>
    <script src="../lib/vue.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/myfilters.js"></script>

    <script src="js/emp.js"></script>
</body>

</html>